<template>
  <el-menu text-color='#fff' active-text-color="#ffd04b" background-color='#545c64' router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
  <h3>{{isCollapse ? '后台' : '蔬菜大棚系统'}}</h3>
  <el-menu-item v-for="item in menu" :key="item.path" :index="item.path">
    <i :class=" 'el-icon-' + item.icon"></i>
    <span slot="title">{{item.label}}</span>
  </el-menu-item>

</el-menu>
</template>

<script>
export default {
    data() {
      return {
        menu: [
            {
              path: '/check',
              name: 'check',
              label: '实时数据',
              icon: 'location-information',
              url: 'Check/Check'
            },
            {
              path: '/history',
              name: 'history',
              label: '历史数据',
              icon: 'lightning',
              url: 'History/History'
            },
            {
              path: '/pred',
              name: 'pred',
              label: '预测',
              icon: 'data-line',
              url: 'Pred/Pred'
            },
            {
              path: '/charts',
              name: 'charts',
              label: '继电器状态',
              icon: 'set-up',
              url: 'Charts/Charts'
            }
              ]
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    computed: {
      isCollapse() {
        return this.$store.state.tab.isCollapse;
      }
    }
  }
</script>

<style lang="less" scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 170px;
    min-height:400px;
  }
.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: #fff;
    text-align: center;
  }
}
</style>